<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>response-table</title>
    <link rel="stylesheet" href="../css/plugins/bootstrap.min.css">
    <link rel="stylesheet" href="../css/theme.css">
</head>

<body>
    <!-- 表格组件 -->
    <div class="response-table row" id="response-table">
        <div class="response-table__patternDiv">
            <a class="response-table__btn response-table--edit">编辑模式</a>
            <a class="response-table__btn response-table--browse">浏览模式</a>
        </div>
        
        <div class="response-table__panel"></div>
        <!-- 表操作按钮 -->
        <div class="response-table__panel--button col-sm-12">
            <!-- 添加参数 -->
            <button class="response-table__btn btn-sm btn__joinli"> <i class="iconfont icon-tianjia"></i>添加参数 </button>
            <!-- 导入json -->
            <button class="response-table__btn btn-sm btn__exportJSON"> <i class="iconfont icon-importexport"></i>导入json </button>
            <!-- 保存 -->
            <button class="response-table__btn btn-sm btn__savedata"> <i class="iconfont icon-tianjia"></i>保存</button>
            <!-- 清空数据 -->
            <button class="response-table__btn btn-sm btn__cleardata"> <i class="iconfont icon-tianjia"></i>清空数据</button>          
        </div>
    </div>

    <!-- 表格组件 -->
    <div class="response-table row" id="response-table2">
        <div class="response-table__patternDiv">
            <a class="response-table__btn response-table--edit">编辑模式</a>
            <a class="response-table__btn response-table--browse">浏览模式</a>
        </div>
        <div class="response-table__panel"></div>
        <!-- 表操作按钮 -->
        <div class="response-table__panel--button col-sm-12">
            <!-- 添加参数 -->
            <button class="response-table__btn btn-sm btn__joinli"> <i class="iconfont icon-tianjia"></i>添加参数 </button>
            <!-- 导入json -->
            <button class="response-table__btn btn-sm btn__exportJSON"> <i class="iconfont icon-importexport"></i>导入json </button>
            <!-- 保存 -->
            <button class="response-table__btn btn-sm btn__savedata"> <i class="iconfont icon-tianjia"></i>保存</button>
            <!-- 清空数据 -->
            <button class="response-table__btn btn-sm btn__cleardata"> <i class="iconfont icon-tianjia"></i>清空数据</button>          
        </div>

    </div>

    <script src="../scripts/plugins/jquery-2.1.1.min.js"></script>
    <script src="../scripts/responseTable.js"></script>
    <script>
        // 模拟导入的数据
        var data = [
            {
                id:'100001',
                name:'menu',
                yesno:'false',
                type:'object',
                default:'1',
                describe:'1111111',
            },{
                id:'c10000100002',
                pid:'100001',
                name:'item',
                yesno:'false',
                type:'string',
                default:'2',
                describe:'1111111333',
            },{
                id:'d10000234',
                pid:'c10000100002',
                name:'item',
                yesno:'false',
                type:'string',
                default:'3',
                describe:'1111111333',
            }
        ];
        /*****
        *  默认全部都有
        *  @param  : data ( 传入默认数据，数组 )
        *  @param  : pattern: [ edit (编辑模式) , browse(浏览模式) ]
        *  @param  : menu:[operation (操作),name (参数),yesno (必须),default (默认),type (类型),describe (描述)]
        *****/
        $('#response-table').responseTable({
            data : data,
            pattern:'edit',
            menu:['name','yesno','default','type','describe']
        });
        // $('#response-table2').responseTable({
        //     pattern:'browse',
        //     menu:['name','yesno','type','describe']
        // });
        $('#response-table2').responseTable();
    </script>
</body>

</html>